<template>
    <span>
        <div class="step-container" v-if="mode === 'study'">
            <div class="step-title">业务步骤</div>
            <div class="step-area">
                <ul class="step-ul">
                    <li
                        :class="['step-li', i === active && 'active', i < active && 'done']"
                        v-for="(step, i) in steps"
                        :key="i"
                    >
                        <div class="step-name" @click="goto(step, i)">
                            {{ step.title }}
                            <i class="el-icon-caret-right" v-if="i === active"/>
                            <i class="el-icon-check" v-if="i < active"/>
                            <i
                                class="el-icon-info"
                                v-if="step.audio && i === active && !playingAudio"
                                @click.stop="play(i)"
                            />
                            <img v-if="step.audio && playingAudio" :src="playingIcon" width="17px">
                        </div>
                        <div class="step-desc">{{ step.description }}</div>
                        <audio
                            v-if="step.audio"
                            :ref="`stepAudio_${i}`"
                            @abort="playingAudio = null"
                            @ended="playingAudio = null"
                        >
                            <source :src="step.audio">
                        </audio>
                    </li>
                </ul>
            </div>
        </div>
        <div class="skip-area" v-if="mode === 'exam'">
            <el-button
                style="padding-right: 20px"
                type="warning"
                icon="el-icon-arrow-right"
                @click="skipPage"
            >跳过环节</el-button>
            <el-button type="danger" icon="el-icon-d-arrow-right" @click="skipStep">跳过步骤</el-button>
        </div>
    </span>
</template>
<script>
import moment from 'moment'
import playingIcon from '@/assets/images/icons/playing.gif'

export default {
    name: 'steps-item',
    props: ['steps', 'pages', 'autoScroll', 'mode'],
    data() {
        return {
            active: 0,
            updateTime: moment(),
            playingAudio: null,
            playingIcon
        }
    },
    updated() {
        const isProcess = document.getElementsByClassName('step-li active')
        if (this.autoScroll && isProcess && isProcess[0]) {
            isProcess[0].scrollIntoView()
        }
    },
    watch: {
        pages: function(pages) {
            for (let i in this.steps) {
                if (pages >= this.steps[i].pages) {
                    this.active = Number(i)
                }
            }
        },
        active: function(index) {
            const duration = Math.round(moment.duration(moment().diff(this.updateTime)).asSeconds())
            this.stop()
            this.$emit('duration', { duration, stepIndex: index - 1 })
            this.updateTime = moment()
            // 判断考试结束
            console.log('active', index, this.steps.length)
            if (index === this.steps.length - 1) {
                this.$emit('end')
            }
        }
    },
    methods: {
        play(i) {
            const stepAudio = this.$refs[`stepAudio_${i}`][0]
            stepAudio && stepAudio.play()
            this.playingAudio = stepAudio
        },
        stop() {
            this.playingAudio && this.playingAudio.pause()
            this.playingAudio = null
        },
        goto(step, i) {
            if (step && step.pages !== undefined) {
                this.$emit('change', step.pages)
                this.active = i
                this.stop()
            }
        },
        skipPage() {
            this.$emit('change', this.pages + 1)
            this.stop()
        },
        skipStep() {
            if (this.steps[this.active + 1]) {
                this.$emit('change', this.steps[this.active + 1].pages)
                this.active += 1
                this.stop()
            } else {
                this.$emit('change')
                this.stop()
            }
        }
    }
}
</script>
<style lang="less">
.step-container {
    background-color: #efefef;
    border-radius: 12px;
    .step-title {
        color: #ff6900;
        padding: 4px 13px;
        font-size: 20px;
        font-weight: 500;
    }
    .step-area {
        background-color: white;
        margin: 0px 11px;
        border-radius: 8px;
        height: calc(100% - 45px);
        overflow: auto;
        box-shadow: 0px 0px 10px rgba(255, 105, 0, 0.5);
    }
    height: 100%;
    .step-ul {
        font-size: 18px;
        list-style: none;
        margin-block-start: unset;
        padding-inline-start: 30px;
        .step-li {
            position: relative;
            &.done {
                color: lightgray;
            }
            &.active {
                color: #ff6900;
            }
            .step-name {
                font-weight: 500;
                cursor: pointer;
                &:hover {
                    opacity: 0.6;
                    transition: 0.3s;
                }
            }
            .step-desc {
                font-weight: 100;
                font-size: 16px;
            }
            .el-icon-caret-right {
                position: absolute;
                left: -20px;
                top: 4px;
                color: #ff6900;
            }
            .el-icon-check {
                position: absolute;
                left: -20px;
                top: 4px;
                color: lightgray;
            }
            .el-icon-info {
                color: #ff6900;
                cursor: pointer;
            }
        }
    }
}
.skip-area {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.btn-audio {
    transform: scale(0.7);
}
.audio-ctrl {
    position: absolute;
    right: 0px;
    top: 0px;
    transform: scale(0.5);
    right: -75px;
    top: -15px;
}
</style>


